<template>
<div :class="[$style.container]">
  <div :class="[$style.body]" v-loading="loading">
    <ul :class="[$style.list]" v-if="rows.length > 0">
      <li :class="[$style.item]" v-for="(row, i) in rows" :key="i">
        <div :class="[$style.avatar]"><color-avatar :size="32" :text="row.ownName" initial></color-avatar></div>
        <div :class="[$style.content]">
          <div :class="[$style.text]">{{row.ownName}}</div>
          <div :class="[$style.desc]">
            <el-tooltip :content="umaskText(row.umask)">
              <span class="text-info">{{row.umask | perms}}</span>
            </el-tooltip>
          </div>
        </div>
        <div :class="[$style.action]" v-if="editable">
          <doc-perm-group-dropdown :value="row.umask" :team="row.ownType === 'team'" @input="umask => onChangeUmask(row, umask)">
            <el-link :underline="false"><i class="el-icon-more"></i></el-link>
          </doc-perm-group-dropdown>
        </div>
      </li>
    </ul>
    <empty-data v-else>无授权信息</empty-data>
  </div>
  <div :class="[$style.footer]">
    <el-divider>
      <el-link :underline="false" type="info" @click="onView">查看继承权限</el-link>
    </el-divider>
    <el-button size="samll" plain @click="onAuthorize" v-if="editable">添加授权</el-button>
  </div>
  <doc-authorize-modal ref="docAuthorizeModal"></doc-authorize-modal>
  <doc-perm-view-modal ref="docPermViewModal"></doc-perm-view-modal>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import DocAuthorizeModal from '@/views/pages/docs/components/doc-authorize-modal/index.vue'
import DocPermGroupDropdown from '@/views/pages/docs/components/doc-perm-group-dropdown/index.vue'
import { queryAclByDoc, updateAcl } from '@/api/acl'
import { getUmaskText, hasPerm } from '@/config/acl'
import DocPermViewModal from './doc-perm-view-modal/index.vue'

@Component({
  components: { DocAuthorizeModal, DocPermGroupDropdown, DocPermViewModal }
})
export default class DocPerm extends Vue {
  @Prop() data!: any

  @Ref() docAuthorizeModal!: any

  @Ref() docPermViewModal!: any

  loading = false

  rows: any[] = []

  get editable () {
    return this.data?.privilege?.none === false || hasPerm('authorize', this.data)
  }

  umaskText (row: any) {
    return getUmaskText(row)
  }

  loadData () {
    if (!this.data) return
    this.loading = true
    queryAclByDoc(this.data?.id).then(data => {
      this.rows = data || []
    }).finally(() => {
      this.loading = false
    })
  }

  onChangeUmask (row: any, umask: number) {
    updateAcl(row?.id, { umask }).then(() => {
      this.$message.success('编辑权限成功')
      Object.assign(row, { umask })
    })
  }

  onAuthorize () {
    this.docAuthorizeModal.open(this.data).then(() => {
      this.$message.success('编辑权限成功')
      this.loadData()
    }).catch(() => {
      // ignore
    })
  }

  onView () {
    this.docPermViewModal.open(this.data)
  }

  created () {
    this.loadData()
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
}

.body {
  overflow: auto;
  height: calc(100vh - 48px - 40px - 160px);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  box-sizing: border-box;
  display: flex;
  height: 48px;
  align-items: center;
  padding: 8px 4px;
  margin-bottom: 8px  ;

  &:hover {
    background-color: $bg-body-color;
  }
}

.avatar {
  width: 32px;
  padding: 0 8px;
}

.content {
  flex: 1 1 auto;
  width: 0;
}

.text {
  color: $text-regular-color;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.desc {
  color: $text-secondary-color;
}

.action {
  width: 24px;
  margin-left: 12px;
}

.footer {
  padding: 0px 16px 8px 16px;
  &>button {
    width: 100%;
  }
}
</style>
